<template>
	<view class="pageview">
		<cl-navbar title="" leftIconSize="40rpx" placeholder autoBack></cl-navbar>
		<view class="settingview">
			<view class="l_top">
				<view class="l_text">设置支付密码</view>
				<view class="l_details" :style="{color:detailsJson.color}">{{detailsJson.text}}</view>
			</view>
			<view class="l_top" style="margin-top:100rpx;">
				<view class="mima">
					<view class="item" v-for="index in 6" :key="index">
						<view v-if="len < index"></view>
						<view v-if="len >= index" class="dot"></view>
					</view>
				</view>
			</view>
			<view style="display: flex;margin: 100rpx auto 0;justify-content: center;" v-if="page == '2'">
				<text style="border-radius: 20rpx;padding: 20rpx 0;text-align: center;width: 300rpx;" :style="{backgroundColor:complete?'#51b321':'#1E1F30',color:complete?'#ffffff':'#a8a8a8'}" @click="tijiao">完成</text>
			</view>
		</view>
		<view class="keypan">
			<view class="pan_num_key" v-for="(item, index) in boardlists" :key="index" hover-class="click_hover" @click="writepwd(item.id)">{{ item.con }}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		computed: {
			len() {
				return this.trade_pwd.length;
			},
		},
		data() {
			return {
				complete:false,
				detailsJson:{
					text:'请设置支付密码，用户支付验证',
					color:'#ffffff'
				},
				page:'1',//当前页面1为支付密码2为确认密码
				pay_password:'',//支付密码
				pay_password_confirm:'',//确认支付密码
				trade_pwd: '',
				numarr: [],
				boardlists: [{
						id: 1,
						con: 1,
					},
					{
						id: 2,
						con: 2,
					},
					{
						id: 3,
						con: 3,
					},
					{
						id: 4,
						con: 4,
					},
					{
						id: 5,
						con: 5,
					},
					{
						id: 6,
						con: 6,
					},
					{
						id: 7,
						con: 7,
					},
					{
						id: 8,
						con: 8,
					},
					{
						id: 9,
						con: 9,
					},
					{
						id: 10,
						con: "",
					},
					{
						id: 11,
						con: 0,
					},
					{
						id: 12,
						con: "x",
					},
				],
			};
		},
		methods: {
			tijiao(){
				if(!this.complete){
					return
				}
				uni.$api.user.setPayPassword({
					pay_password:this.pay_password,
					pay_password_confirm:this.pay_password_confirm
				}).then(res=>{
					if(res && res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						setTimeout(()=>{
							this.$Router.back()
						},1000)
					}
				})
			},
			writepwd(num) {
				if (num === 12) {
					this.close();
					return;
				}
				if (num === 10) return; // 无操作
				if (num === 11) num = 0; // 处理删除数字

				if (this.numarr.length < 6) { // 确保不超过6位
					this.numarr.push(num);
					this.trade_pwd = this.numarr.join("");
				}
				this.$nextTick(() => {
					if (this.numarr.length == 6) {
						this.setpwd()
					}
				})

			},
			close() {
				if (this.numarr.length > 0) { // 仅在数组非空时删除
					this.numarr.pop();
					this.trade_pwd = this.numarr.join(""); // 更新显示
					if(this.page == '2' && this.complete){
						this.complete = false
					}
				}
			},
			setpwd() {
				if (this.trade_pwd.length < 6) {
					console.log('密码长度不能少于6位');
					return;
				}
				if(this.page == '1'){
					this.pay_password = this.trade_pwd
					this.page = '2'
					this.detailsJson = {
						text:'请再次填写以确认',
						color:'#ffffff'
					},
					this.$nextTick(()=>{
						this.numarr = []
						this.trade_pwd = ''
					})
				}else if(this.page == '2'){
					this.pay_password_confirm = this.trade_pwd
					if(this.pay_password_confirm !== this.pay_password){
						this.page = '1'
						this.detailsJson = {
							text:'两次密码输入不一致',
							color:'#e05c69'
						},
						this.pay_password_confirm = ""
						this.pay_password = ""
						this.$nextTick(()=>{
							this.numarr = []
							this.trade_pwd = ''
						})
					}else{
						this.complete = true
					}
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.keypan {
		width: 100%;
		height: 30vh;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;

		.pan_num_key {
			width: 250rpx;
			height: 25%;
			box-sizing: border-box;
			background-color: #0C0D1A;
			border: #1E1F30 solid 0.1rpx;
			font-size: 40rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: Center;
		}

		.click_hover {
			background-color: #0f0f24;
		}
	}


	.settingview {
		width: 100%;
		margin-top: 100rpx;
		.l_top {
			width: 750rpx;

			.l_text {
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				margin: auto;
			}
			.l_details {
				font-size: 28rpx;
				text-align: center;
				margin: auto;
				margin-top: 30rpx;
			}
		}
	}

	.title {
		color: #616161;
		text-align: center;
		font-size: 30upx;
		margin-bottom: 34upx;
	}

	.mima {
		flex-direction: row;
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: center;

		.item {
			width: 80rpx;
			height: 80rpx;
			margin: 0 10rpx;
			background-color: #1E1F30;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-weight: 500;

			.dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
				background: white;
			}
		}

		.trade_pwd {
			position: absolute;
			height: 78upx !important;
			width: 480upx;
			opacity: 0;
		}
	}

</style>